<template>
  <div class="box">
    <!-- 左 -->
    <vuedraggable class="wrapper" v-model="list" @end="aa" @start="bb">
      <transition-group class="group">
        <div v-for="(item, index) in list" :key="item.id" class="item">
          <div>
            <img :src="item.imgs" alt="" />
            <span class="spans" v-show="isNaNisshow">x</span>
            <!-- {{item.name}} -->
          </div>
        </div>
      </transition-group>
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";

export default {
  name: "HelloWorld",

  components: { vuedraggable },

  props: {},

  data() {
    return {
      list: [
        {
          id: 0,
          name: "赵云",
          imgs: "https://img0.baidu.com/it/u=4147990289,1188137584&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        },
        {
          id: 1,
          name: "关羽",
          imgs: "https://img2.baidu.com/it/u=1540885163,165576735&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1132",
        },
        {
          id: 2,
          name: "张飞",
          imgs: "https://img2.baidu.com/it/u=310270117,3797803983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=711",
        },
        {
          id: 3,
          name: "马超",
          imgs: "https://img0.baidu.com/it/u=3830325758,3584941488&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=454",
        },
        {
          id: 4,
          name: "黄忠",
          imgs: "https://img1.baidu.com/it/u=3478731737,341025983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=384",
        },
      ],
      list1: [
        {
          id: 0,
          name: "赵云",
          imgs: "https://img0.baidu.com/it/u=4147990289,1188137584&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        },
        {
          id: 1,
          name: "关羽",
          imgs: "https://img2.baidu.com/it/u=1540885163,165576735&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1132",
        },
        {
          id: 2,
          name: "张飞",
          imgs: "https://img2.baidu.com/it/u=310270117,3797803983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=711",
        },
        {
          id: 3,
          name: "马超",
          imgs: "https://img0.baidu.com/it/u=3830325758,3584941488&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=454",
        },
        {
          id: 4,
          name: "黄忠",
          imgs: "https://img1.baidu.com/it/u=3478731737,341025983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=384",
        },
      ],
      isNaNisshow: false,
    };
  },
  update() {},
  methods: {
    aa(e) {
      this.list = this.list1;
      this.isNaNisshow = false;
    },
    bb() {
      this.isNaNisshow = true;
    },
  },
};
</script>

<style scoped>
.group {
  /* border: 1px solid; */
  display: flex;
  width: 480px;
  flex-wrap: wrap;
}
.item {
  /* border: 1px solid; */

  margin-right: 10px;
}
.item div {
  position: relative;
}
img {
  width: 150px;
  height: 100px;
  border-radius: 10px;
}
.spans {
  position: absolute;
  right: 10px;
}
</style>
